<!--
 * @Description: 
 * @Date: 2022-05-24 11:50:17
 * @LastEditTime: 2022-08-04 16:59:48
 * @FilePath: \jsnode\css\borderradius.html
-->
<!DOCTYPE html>
<html>
<head>
<style>
.comcss{
    background-color: green;
    width: 200px;
    height: 200px;
    margin-top: 10px;
    color: #ffffff;
    text-align: center;
    border: 10px solid red;
}
.css1{
    
    border-radius: 20px ;
    
}
.css2{
    border-radius: 40px 20px;
}
.css22{
    border-radius: 20px 40px;
}
.css3{
    border-radius: 20px 10px 5px;
}
.css4{
    border-radius: 40px 30px 20px 10px;
}
.css5{
    border-radius: 100px /100px;
}
.css6{
    border-radius: 100px  50px /50px;
}
.css7{
    border-radius:  100px  50px /100px 50px 20px;
}

.css8{
    border-radius:  60% 40%;
}


</style>
</head>
<body style="background-color: #909090;">

<h1>border-radius 属性</h1>

<div class="comcss">普通边框</div>
<div class="comcss css1">一个圆角属性的边框</div>
<div class="comcss css2">两个个圆角属性的边框，控制左上右下</div>
<div class="comcss css22">两个个圆角属性的边框，控制左下右上</div>
<div class="comcss css3">三个圆角属性的边框，（a,b，c）a左上，b右上，左下。c右下</div>
<div class="comcss css4">四个圆角属性的边框：（a,b，c，d）左上，右上，右下，左下</div>
<div class="comcss css5">斜杠圆角属性的边框</div>
<div class="comcss css6">斜杠圆角属性的边框 ,还是得出四个值，对应左上，右下。右上左下</div>
<div class="comcss css7">斜杠圆角属性的边框 (a,b)/(c,d,e) 左上 a/c 右上 b/d 右下 a/e  左下 b/d</div>
<div class="comcss css8">椭圆测试</div>
<div class="comcss css9">25%成不了圆，50%》都是圆测试</div>



</body>
</html>
